import React,{useState,useEffect} from 'react'
import { StyleSheet,View,Text,Image,TouchableOpacity,ScrollView,ImageBackground,TextInput} from 'react-native'
import '../global'  
import { useFocusEffect } from '@react-navigation/native'
import { AntDesign } from '@expo/vector-icons';
const Home = ({navigation}) => {
    const [num,setNum]=useState(2)
    const [alltopic,setAlltopic]=useState()
    const [topic,setTopic]=useState([{
        id:0,
        topic_user_name:'',
        topic_user_avatar:'../assects/icon.png',
        topic_type:"",
        topic_title:'我爱学习',
        topic_img:'',
        topic_number_of_likes:12,
        topic_content:'123',
        createdAt:''

    }])
    const [value,setValue]=useState()
    const showEnglishtopic=()=>{
        setNum(1)
        const englishTopic = alltopic.filter((item) => item.topic_type!=='math');
        setTopic(englishTopic)
    }
    const showMathtopic=()=>{
        setNum(3)
        const mathTopic = alltopic.filter((item) => item.topic_type!=='english');
        setTopic(mathTopic)
    }
    const showAlltopic=()=>{
        setNum(2);
        setTopic(alltopic)
    }
    const search=()=>{
        const searchTopic=[]
        alltopic.map((item,i)=>{
            if(item.topic_title.indexOf(value)!=-1){  
            searchTopic.push(item)
            }
        })
        setTopic(searchTopic)
    }
    useFocusEffect(React.useCallback(()=>{
        fetch('http://82.157.94.91:8000/topics/get_all_topics')
         .then(res=>res.json())
         .then(res=>{
          setAlltopic(res.result)
           setTopic(res.result)
         })
    },[]))
    
  return(
      <View>
          <View style={styles.select}>
            <TouchableOpacity style={[styles.recommend,num==1?styles.click:null]} onPress={()=>{showEnglishtopic()}}>
                <View >
                    <Text style={styles.font}>英语</Text>
                </View>
            </TouchableOpacity >
            <TouchableOpacity onPress={()=>{showAlltopic()}} >
                <View style={[styles.recommend,num==2?styles.click:null]}>
                    <Text style={styles.font}>推荐</Text>
                </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={()=>{showMathtopic()}}>
                <View style={[styles.recommend,num==3?styles.click:null]}>
                    <Text style={styles.font}>数学</Text>
                </View>
            </TouchableOpacity>
        </View>
        <View style={styles.search}>
            <TextInput 
                placeholder='请输入'
                value={value}
                onChangeText={(text)=>{setValue(text)}}
                style={styles.input}
            />
            <TouchableOpacity onPress={()=>{search()}}>
              <AntDesign name="search1" size={28} color="black" />
            </TouchableOpacity>
        </View>
        <ScrollView>
            {topic.map(item=>{
                
                return<TouchableOpacity onPress={()=>{navigation.navigate('Deatil',{txt:'详情',detailObj:item})}}>
                 <View style={{width:pxtodpW(750),height:pxtodpH(12),backgroundColor:'lightgrey'}}></View>
                <View style={styles.user}>
                         <Text style={styles.title}>{item.topic_title}</Text>
                         <View style={styles.userstyle}>
                         <Image 
                            style={styles.head}
                            source={{
                                uri: item.topic_user_avatar,
                              }}
                         />
                         
                          <Text style={{ marginLeft:pxtodpW(10),lineHeight:pxtodpH(85)}}>{item.topic_user_name}</Text>
                         </View>
                          
                           <Text style={styles.synopsis}>{item.topic_content}</Text>
                           <View style={styles.point}>
                           <Text style={styles.detail}>{item.topic_number_of_likes}赞同</Text>
                           <Text style={{fontSize:25,color:'grey',marginTop:pxtodpH(-20)}}>...</Text>
                           </View>
                </View>
                </TouchableOpacity>
            
            })}
        </ScrollView>
      </View>
  )
}

const styles = StyleSheet.create({
    select:{
        width:pxtodpW(750),
        height:pxtodpH(70),
        display:'flex',
        flexDirection:'row',
        justifyContent:"space-around",
    },
    select2:{
        width:pxtodpW(750),
        height:pxtodpH(60),
        display:'flex',
        flexDirection:'row',
        justifyContent:"space-around",
        alignItems:'center',
        backgroundColor:'lightblue'
        
    },
    select3:{
        display:'none',
        backgroundColor:'lightblue'
    },
    recommend:{
       width:pxtodpW(57),
       height:pxtodpH(88),
    },
    click:{
       borderBottomWidth:4,
       borderBottomColor:'blue' ,
       fontSize:20
    },
    font:{
        lineHeight:pxtodpH(88),
        textAlign:'center',
        fontSize:17
    },
    search:{
        width:pxtodpW(700),
        height:pxtodpH(60),
        borderColor:'black',
        borderWidth:1.5,
        borderRadius:20,
        marginTop:pxtodpH(30),
        marginLeft:pxtodpW(30),
        display:'flex',
        flexDirection:'row',
        justifyContent:"space-around",
        borderColor:'blue'
    },
    input:{
        marginLeft:pxtodpW(10),
        width:pxtodpW(500),
        height:pxtodpH(60),
        color:'black'

    },
    user:{
        width:pxtodpW(670),
        height:pxtodpH(250),
        marginTop:pxtodpH(15),
    },
    title:{
        marginLeft:pxtodpW(20),
        fontSize:19
    },
    head:{
       width:pxtodpW(80),
       height:pxtodpH(80),
       marginTop:pxtodpH(15),
       marginLeft:pxtodpW(20),
       borderRadius:15
    },
    synopsis:{
        height:pxtodpH(60),
        marginLeft:pxtodpW(20),
        marginTop:pxtodpH(15),
    },
    detail:{
        marginLeft:pxtodpW(20),
        marginTop:pxtodpH(-15),
        color:'grey'
    },
    background:{
        width:pxtodpW(750),
        height:pxtodpH(1334),
    },
    userstyle:{
        display:'flex',
        flexDirection:'row',
    },
    point:{
        display:'flex',
        flexDirection:'row',
        justifyContent:'space-between',
    }

   });
   
export default Home
